import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Flex, Icon ,Toast} from "antd-mobile";
import s from "./index.scss";
import AxFooter from 'components/Footer'
import AxHeader from 'components/AxHeader'
import  Spin from 'antd/lib/Spin';
import myshouyi from "assets/images/my_shouyi.png";
import jxLogo from "assets/images/jxLogo.png";
import ac_icon1 from "assets/images/ac_icon1.png";
import ac_icon2 from "assets/images/ac_icon2.png";
import ac_icon3 from "assets/images/ac_icon3.png";
import ac_icon4 from "assets/images/ac_icon4.png";
import ac_icon5 from "assets/images/ac_icon5.png";
import ac_icon6 from "assets/images/ac_icon6.png";
import refresh from "assets/images/refresh.png";
import jxparter from "assets/images/jxparter.jpg";

import { hashHistory, router } from "React-router";
import Modal from 'antd/lib/Modal';
import {callApi} from "app/utils"
import TweenOne from "rc-tween-one";

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      refreshState:true,
      visible: false,
      visible2: false,
      dialogTitle:'',
      animation:[{rotate:360, duration: 1000 ,repeat: -1, }],
      info:{paused:true},
      visibleAuthFlag:false,
      dialogTitleAuthFlag:'江西银行资金存管',
      dialogBtnStatus:1
    };
    this.gradClick = this.gradClick.bind(this)
    this.showModal = this.showModal.bind(this)
    this.handleOk = this.handleOk.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
    this.linkCharge = this.linkCharge.bind(this)
    this.linkWithdraw = this.linkWithdraw.bind(this)
    
  }

  test(){
    if(!(this.props.overview.data==undefined)){
      if(this.props.overview.data.user.authFlag==0){
        this.setState({
          visibleAuthFlag:true,
          dialogBtnStatus:1
        })
        return false
      }
      if(this.props.overview.data.user.bindCardFlag==0){
          this.setState({
            visibleAuthFlag:true,
            dialogBtnStatus:2
        })
        return false
      }
      if(this.props.overview.data.user.payPasswdSetFlag==0){
        this.payPasswdSet()
        return false
      }
      // return false
    }
   
    return true
  }
  linkWithdraw(){
    if(this.test()==true){
       hashHistory.push('/my/withdraw')
    }
  }
  linkCharge(){
    if(this.test()==true){
      hashHistory.push('/my/recharge')
    }
  }
  payPasswdSet(){
    callApi('/account/paypassword',{token:JSON.parse(localStorage.getItem('userData')).token},"POST").then((data)=>{
        location.href = data.data.ret_url;
    })
  }
  showModal() {
    this.setState({
      visible: true,
      dialogTitle:'可用余额'
    });
    

  }

  handleOk() {
    console.log('点击了确定');
    this.setState({
      visible: false,
      visibleAuthFlag:false
    });
  }
  handleCancel(e) {
    console.log(e);
    this.setState({
      visible: false,
      visibleAuthFlag:false
    });
  }


  gradClick(e){
    this.props.props.router.push(e)
  }
  componentDidMount() {
    let that = this

  
  }

  refreshImg(){
    this.setState({info:{paused:false}})
    callApi('/account/sync/balance',{token:JSON.parse(localStorage.getItem('userData')).token},"POST").then((data)=>{
      if(data.success==true){
        this.props.overview.data.balance  = data.data.balance
      }
      this.setState({info:{paused:true}})
    }).catch((err) => {
      this.setState({info:{paused:true}})
    })
  }

  render() {
    let {gradClick,overview} = this.props;
    console.log(overview)
    let str
    let success = overview.success
    let {refreshState} = this.state
    // if(JSON.stringify(overview)!='{}'){
      str = <div className={`${s.myBox}`}>
      <AxHeader/>
      <Flex
        style={{
          background: `url(${myshouyi}) no-repeat`,
          backgroundSize: "100% 100%"
        }}
        className={`${s.MyTop}`}
        direction="column"
      >
        <Flex direction="column" className={`${s.oneBox}`}>
          <Flex.Item className={`${s.top}`}>￥{success?overview.data.dueProfit:'0.00'}</Flex.Item>
          <Flex.Item className={`${s.bottom}`} onClick={()=>{
            hashHistory.push({pathname:"/my/income",query:{flag:1}})
          }}>
            待收收益(元)<Icon type="right" />
          </Flex.Item>
        </Flex>
        <Flex direction="row" className={`${s.twoBox}`}>
          <Flex.Item className={`${s.top}`}>
            <Flex direction="column" className={`${s.borderRight}`}>
              <Flex.Item className={`${s.s1}`}>￥{success?overview.data.totalAsset:'0.00'}</Flex.Item>
              <Flex.Item className={`${s.s2}`} onClick={()=>{
            hashHistory.push({pathname:"/my/income",query:{flag:2}})
          }}>
                资产总计(元)<Icon type="right" />
              </Flex.Item>
            </Flex>
          </Flex.Item>
          <Flex.Item className={`${s.bottom}`}>
            <Flex direction="column">
              <Flex.Item className={`${s.s1}`}>￥{success?overview.data.totalProfit:'0.00'}</Flex.Item>
              <Flex.Item className={`${s.s2}`} onClick={()=>{
            hashHistory.push({pathname:"/my/income",query:{flag:3}})
          }}>
                总收益(元)<Icon type="right" />
              </Flex.Item>
            </Flex>
          </Flex.Item>
        </Flex>
      </Flex>
      <Flex className={`block05`}/>
      <Flex className={`${s.block1}`}>
        <Flex.Item className={`text-center flex4`}>
          <img src={jxLogo} />
        </Flex.Item>
        {success?(overview.data.user.accountId!=''&&overview.data.user.accountId!=undefined?<Flex.Item className={`flex6 ${s.bindBlock}`}>
            <span className={``}>{overview.data.user.accountId}</span>
        </Flex.Item>:<Flex.Item className={`flex6`}>
          您还未开通江西银行账户&nbsp;&nbsp;<span className={`${s.red}`} onClick={()=>{
            hashHistory.push({pathname:"/my/bindBankCard"})
          }}>去开通</span>
        </Flex.Item>):<Flex.Item className={`flex6`}>
          您还未开通江西银行账户&nbsp;&nbsp;<span className={`${s.red}`} onClick={()=>{
            hashHistory.push({pathname:"/my/bindBankCard"})
          }}>去开通</span>
        </Flex.Item>
        }
      
      </Flex>
      <Flex className={`${s.block2}`}>
        <Flex.Item className={`text-left flex4`} style={{height:"0.5rem"}}>
          <Flex direction="column" className={`${s.borderRight}`} style={{height:"0.5rem"}}>
            <Flex.Item className={`${s.s1}`}>￥{success?(((overview.data.balance-0)+(overview.data.cash-0)).toFixed(2)):'0.00'}</Flex.Item>
            <Flex.Item className={`${s.s2}`} onClick={this.showModal}>
              可用余额(元)<Icon type="right" />
            </Flex.Item>
          </Flex>
        </Flex.Item>
        <Flex.Item className={`text-right flex6`}>
          <span className={`${s.marR20}`} onClick={this.refreshImg.bind(this)}>
          点击刷新
          
          <TweenOne
            animation={this.state.animation}
            paused={this.state.info.paused}
            className={`${s.refreshImg}`}
            component="img"
            src={refresh}
            resetStyleBool="true"
            key="a"
          >
          </TweenOne>
          </span>
        </Flex.Item>
      </Flex>
      <Flex className={`block05`}/>
      <Flex className={`${s.block3}`}>
        <Flex.Item className={`text-center flex5 ${s.left}`} onClick={this.linkCharge}>
          <span className={`font16`}>充值</span>
        </Flex.Item>
        <Flex.Item className={`text-center flex5 ${s.right}`} onClick={this.linkWithdraw}>
          <span  className={`font16`}>提现</span>
        </Flex.Item>
      </Flex>
      <Flex className={`block05`}/>
      <div className={`${s.block4}`}>
        <Flex>
          <Flex.Item className={`text-center flex5 ${s.item}`}
          onClick={this.gradClick.bind(this,'/my/investRecord')}>
            <img src={ac_icon1} />
            <span>投资记录</span>
          </Flex.Item>
          <Flex.Item className={`text-center flex5 ${s.item}`}
          onClick={this.gradClick.bind(this,'/my/capitalFlow')}
          >
            <img src={ac_icon2} />
            <span>资金流水</span>
          </Flex.Item>
          <Flex.Item
            className={`text-center flex5 ${s.item}`}
            style={{ borderRight: 0 }}
            onClick={this.gradClick.bind(this,'/my/calendar')}
          >
            <img src={ac_icon3} />
            <span>回款日历</span>
          </Flex.Item>
        </Flex>
        <Flex>
          <Flex.Item className={`text-center flex5 ${s.item}`}
          onClick={this.gradClick.bind(this,'/my/invite')}
          >
            <img src={ac_icon4} />
            <span>推荐好友</span>
          </Flex.Item>
          <Flex.Item className={`text-center flex5 ${s.item}`} 
           onClick={this.gradClick.bind(this,'/my/myRewards')}
         >
            <img src={ac_icon5} />
            <span>我的优惠</span>
            {success==true&&((overview.data.informationCount-0)>0)&&(overview.data.informationCount!=undefined)?<span className={`${s.spanCircle}`}>{overview.data.informationCount}</span>:null}
          </Flex.Item>
          <Flex.Item
            className={`text-center flex5 ${s.item}`}
            style={{ borderRight: 0 }}
            onClick={this.gradClick.bind(this,'/my/accountManage')}
          >
            <img src={ac_icon6} />
            <span>账户管理</span>
          </Flex.Item>
        </Flex>
      </div>
      <AxFooter base={false}/>
      {this.props.isLogin?null: <div style={{minHeight:'1rem',width:'100%'}}><div className={`${s.noLoginBox}`}>
        <Flex direction="column" align="center" style={{height:"100%"}}>
          <Flex.Item className={`${s.item1}`}>安心投</Flex.Item>
          <Flex.Item className={`${s.item1}`}>江西银行存管资金</Flex.Item>
          <Flex.Item className={`${s.item1}`}>
            <div onClick={()=>{
             this.props.props.router.push('/login')
            }} className={`${s.blueBtn}`}>登录</div>
            <div onClick={()=>{
             this.props.props.router.push('/register')
            }} className={`${s.whiteBtn}`}>注册</div>
          </Flex.Item>
        </Flex>
      </div>
      <div className={`${s.mask}`}></div></div>}
      <Modal wrapClassName={`${s.vertical}`} title={this.state.dialogTitle} visible={this.state.visible}
           onCancel={this.handleCancel} footer={null}
           className={`${s.antmodal}`}
        >
          <div>江西账户余额(元)<span>¥{success?overview.data.balance:'0.00'}</span></div> 
          <div>联动账户余额(元)<span>¥{success?overview.data.cash:'0.00'}</span></div> 
        </Modal>
        <Modal wrapClassName={`authFlagDialog`} title={this.state.dialogTitleAuthFlag} visible={this.state.visibleAuthFlag}
           onCancel={this.handleCancel} footer={null}
           className={`${s.antmodal}`}
        >
          <img src={jxparter} style={{width:"100%"}}/>
          <div className={`p10`}>安心投携手江西银行，为您提供更安全的资金存管服务。</div> 
          {this.state.dialogBtnStatus==1?<div className={`${s.dialogBtn}`} onClick={()=>{
            hashHistory.push('/my/bindBankCard')
          }}>立即开户</div>:null}
          {this.state.dialogBtnStatus==2?<div className={`${s.dialogBtn}`} onClick={()=>{
            hashHistory.push('/my/bindBank')
          }}>立即绑卡</div>:null}
          
       
        </Modal>
    </div>
    // }else{
    //   str = <Flex style={{height:'100vh'}} direction="column" justify="center"><Spin  tip="正在读取数据..."/></Flex>
    // }
    return (
      <div>
      {str}
      </div>
    );
  }
}
